<template>
    <div>
		<div class="container" style="padding-top: 50px;">
			<div>
				<div class="alert alert-success">添加商品</div>
				<div class="input-control has-icon-left" style="margin-bottom: 10px;">
					<input style="width: 100%;" id="inputAccountExample1" type="text" class="form-control" placeholder="商品名称" v-model="gname" />
					<label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
				</div>
				<div class="input-control has-icon-left" style="margin-bottom: 10px;">
					<input style="width: 100%;" id="inputAccountExample1" type="text" class="form-control" placeholder="商品价格" v-model="gprice" />
					<label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
				</div>
				<div class="goodPicture">
					<p>选择商品类别:</p>
					<select name="cid" v-model="cid" style="width: 100px;"> 
						<option value=1>手机</option> 
						<option value=2>电脑 </option> 
						<option value=3>外设</option> 
					</select>
				</div>
				<div class="goodPicture">
					<p>商品图片:</p>
					<div>
						<input type="file" ref="file"/>
					</div>
				</div>
				<button class="btn btn-primary" type="button" @click="save">确认添加</button>
			</div>
		</div>
	</div>
</template>
 
<script>
export default {
    data(){
        return {
            gname: '',
			gtext:'',
			gprice: null,
			cid: 1	
        }
    },
    components:{},
    props:{},
    watch:{},
    computed:{},
    methods:{
        save(){
            let formData=new FormData();
            formData.append('gname',this.gname)
			formData.append('gprice',this.gprice)
			formData.append('gtext',this.gtext)
			formData.append('cid',this.cid)
            formData.append('img',this.$refs.file.files[0])
            this.$axios.post('http://localhost:8080/json/good/addGood',formData,{
                'Content-Type':'multipart/form-data'
            }).then(res=>{
				if(res.data==true){
					this.$message({
						message: '添加成功!',
						type: 'success'
					});
				}else {
					this.$message.error('添加失败~');
				}
            })
        }
    },
    created(){},
    mounted(){}
}
</script>
<style>
	.goodPicture {
		display: flex;
		margin-bottom: 20px;
		line-height: 20px;
		height: 20px;
	}
	.goodPicture p {
		font-size: 15px;
		color: #777;
		margin-right: 10px;
		padding-left: 20px;
	}
</style>
